// 把不同的工作 放到不同的方法中
// this 指向

class ChinaMap{
    constructor(){
        console.log('实例化了');
        this.cube=null;//属性
        //统一方案
        this.init();//执行流程的管理方法
        
    }

    init(){
        //三个对象
        this.scene = new THREE.Scene();
        this.setCamera()
        this.setRenderer()
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({color:0x00ff00})
        this.cube = new THREE.Mesh(geometry,material);
        this.scene.add(this.cube)
        this.render()
        this.animate()
        var controller = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    }
    setCamera(){
        this.camera = new THREE.PerspectiveCamera(//透视相机
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        )//很精彩
        this.camera.position.z=10;
        this.camera.position.x=-2;
        this.camera.position.y=-1;
    
    }
    setRenderer() {
        this.renderer = new THREE.WebGLRenderer()
        // 设置画布的大小
        this.renderer.setSize(window.innerWidth, window.innerHeight)
        //这里 其实就是canvas 画布  renderer.domElement
        document.body.appendChild(this.renderer.domElement)
      }
    render(){
        this.renderer.render(this.scene,this.camera)
    }
    animate(){
        
        requestAnimationFrame(this.animate.bind(this))//让代码一直执行 相比于setInterval，requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。
        console.log(this.cube);
        this.cube.rotation.x += 0.01
        this.cube.rotation.y += 0.01
        this.render()
    }
    setLight() {
        this.ambientLight = new THREE.AmbientLight(0xffffff) // 环境光
        this.scene.add(ambientLight)
      }

}